import { reactive } from 'vue'
// 我是不是确确实实把同一功能的数据和业务逻辑组合到一起了啊，所以组合 API
export const useDel = () => {
  const state = reactive({
    arr: [
      {
        id: 0,
        name: 'ifer',
      },
      {
        id: 1,
        name: 'elser',
      },
      {
        id: 2,
        name: 'xxx',
      },
    ],
  })
  const handleDel = (id) => {
    // 根据 id 找索引
    const idx = state.arr.findIndex((item) => item.id === id)
    // 根据索引去删除
    state.arr.splice(idx, 1)
  }
  return {
    state,
    handleDel,
  }
}
export const useAdd = (state) => {
  const user = reactive({
    id: '',
    name: '',
  })
  const handleAdd = () => {
    state.arr.push(Object.assign({}, user))
    user.id = ''
    user.name = ''
  }
  return {
    user,
    handleAdd,
  }
}
